<template>
	<div class="page">
		<z-paging ref="paging" v-model="hotelList" :default-page-size="1000" :show-scrollbar="false"
			:paging-style="{ minHeight: '100vh', backgroundColor: '#F5F6F7' }" :refresher-enabled="true"
			:loading-more-enabled="true" height="100vh" @query="queryList" @scroll="handlePageScroll">
			<template #top>
				<u-navbar title="最美民宿" :autoBack="true" :bgColor="navBgColor" :titleStyle="{color: '#000'}"
					left-icon-color="#606266" />
			</template>
			<u-swiper :list="bannerUrl" indicatorMode="dot" indicator height="450rpx" @click="openImg" />
			<view class="page-list">
				<view v-for="(item) in hotelList" :key="item.Id" class="item">
					<view class="item-l">
						<image :src="item.ShopLogo" mode="aspectFill" class="img" />
					</view>
					<view class="item-r">
						<view class="item-r-t">
							<view class="item-name">{{ item.ShopName }}</view>
							<view class="item-type">{{ item.HotelStarName }}</view>
						</view>
						<view class="item-tag">
							<view v-for="(tag, index) of item.TagsArr" :key="index" class="tag">
								{{ tag }}
							</view>
						</view>
						<view v-if="item.Address" class="item-address">地址：{{ item.Address }}</view>
						<view class="item-price">
							<view>
								<text class="item-price-b">¥{{ item.PerConsumption }}</text>
								<text class="item-price-c">/晚起</text>
							</view>
							<view class="buy-btn" @click="jumpDetail(item)">预订</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</div>
</template>

<script>
	import {
		getShopBgList
	} from '@/api/mall.js'
	import {
		getBySiteAndArea,
	} from "@/api/ws";
	import Config from "@/config";
	export default {
		name: 'TopTenBB',
		data() {
			return {
				hotelList: [],
				starData: [{
						name: "经济型",
						value: "0,1,2",
					},
					{
						name: "舒适型",
						value: "3",
					},
					{
						name: "高档型",
						value: "4",
					},
					{
						name: "豪华型",
						value: "5",
					},
				],
				imgUrl: Config.imgUrl,
				bannerUrl: [
					Config.imgUrl + 'upload/img/ws_static/static/topTenBB/3.jpg',
					Config.imgUrl + 'upload/img/ws_static/static/topTenBB/1.jpg',
					Config.imgUrl + 'upload/img/ws_static/static/topTenBB/2.jpg'
				],
				navBgColor: "transparent",
			}
		},
		methods: {
			handlePageScroll(e) {
				const scrollTop = e.detail.scrollTop;
				if (scrollTop > 185) {
					this.navBgColor = "#fff";
				} else {
					this.navBgColor = "transparent";
				}
			},
			openImg(index) {

				console.log("放大图片", index);
				// 预览图片
				let list = [this.bannerUrl[index]]
				uni.previewImage({
					urls: list,
					longPressActions: {
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},

			async queryList(pageNo, pageSize) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				const {
					Data
				} = await getShopBgList({
					BusinessClassify: '4',
					Index: pageNo,
					Size: pageSize
				})
				uni.hideLoading();
				const filterList = [809, 377, 379, 522, 567, 527, 542, 530, 906, 946];
				const hotelList = Data.filter(item => filterList.includes(item.Id));
				hotelList.forEach(item => {
					const find = this.starData.find(star => {
						return star.value.split(',').includes(`${item.HotelStars}`);
					})
					console.log('find', find)
					item.HotelStarName = find ? find.name : '';
					if (item.Tags) item.TagsArr = item.Tags.split(',');
				})
				console.log('hotelList', hotelList)
				this.$refs.paging.complete(hotelList || []);
			},
			jumpDetail(item) {
				uni.navigateTo({
					url: `/mall_subpages/merchants/detail?id=${item.Id}&type=4`,
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		min-height: 100vh;

		&-list {
			// margin-top: 176rpx;
			padding: 24px;

			.item {
				background-color: #fff;
				display: flex;
				padding: 24rpx;
				border-radius: 16rpx;
				margin-bottom: 24rpx;

				&-l {
					width: 140rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.img {
						width: 140rpx;
						height: 210rpx;
						border-radius: 12rpx;
						transition: transform 0.3s ease;

						&:active {
							transform: scale(1.05);
						}
					}
				}

				&-r {
					flex: 1;
					margin-left: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					&-t,
					.item-tag,
					.item-address,
					.item-price {
						margin-top: 8rpx;
					}

					&-t {
						display: flex;
						flex-wrap: wrap;

						.item-name {
							font-size: $uni-font-size-base;
							flex-basis: 76%;
							font-weight: 600;
						}

						.item-type {
							font-size: $uni-font-size-sm;
							color: #666;
							margin-left: auto;
							flex-shrink: 0;
						}
					}

					.item-tag {
						display: flex;
						flex-wrap: wrap;
						gap: 12rpx;

						.tag {
							background-color: #fff4e6;
							padding: 8rpx;
							font-size: $uni-font-size-sm;
						}
					}

					.item-address {
						font-size: $uni-font-size-sm;
						color: #999;
					}

					.item-price {
						display: flex;
						justify-content: space-between;
						align-items: center;

						&-b {
							color: #fa452d;
							font-size: $uni-font-size-lg;
						}

						&-c {
							font-size: $uni-font-size-sm;
							color: #666;
						}

						.buy-btn {
							width: 76rpx;
							height: 56rpx;
							background: linear-gradient(-40deg, #FF6B0D, #FA452D);
							color: #fff;
							font-size: 28rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 16rpx 4rpx 16rpx 4rpx;
							box-shadow: 2rpx 2rpx 5rpx 0 rgba(252, 86, 31, 0.51);
						}
					}
				}
			}
		}
	}
</style>